<template>
  <div class="channel-edit">
    <draggable v-model="moduleList" handle=".drag-btn">
      <div class="channel-module-online" v-for="(module, index) in moduleList" :key="index">
        <div class="online-top">
          模块名称: {{ module.title }} | 模块类型:
          {{
            $selectFormat['moduleTypeSl'](module.code)
              ? $selectFormat['moduleTypeSl'](module.code).label
              : ''
          }}
          <div class="op-box">
            <!-- <el-switch
              v-model="module.online"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-text="上线"
              :active-value="1"
              inactive-text="下线"
              :inactive-value="0"
            ></el-switch> -->
            <span style="color: #ff3300">模块内容展示方向：</span>
            <el-radio v-model="module.direct" :label="0">横向</el-radio>
            <el-radio v-model="module.direct" :label="1">竖向</el-radio>
            <span style="color: #ff3300">显示个数:</span>
            <el-input v-model="module.showSize" placeholder="显示个数"></el-input>
            <span style="color: #ff3300">换一换次数:</span>
            <el-input v-model="module.exchangeTime" placeholder="换一换次数"></el-input>
            <el-button class="drag-btn" icon="el-icon-rank">点我拖动</el-button>
            <el-button
              type="primary"
              @click="$tabs.open({ name: 'ModuleDetail', params: { id: module.id } })"
            >
              跳转到目标模块
            </el-button>
            <el-button type="danger" icon="el-icon-delete" @click="removeModule(index)">
              移除模块
            </el-button>
          </div>
        </div>

        <div class="content-list">
          <div
            class="content-item"
            :class="{ line: ['JMCategory', 'JMPictureWork'].includes(module.code) }"
            v-for="(item, index) in module.data"
            :key="index"
          >
            <img
              :src="`${item.content.image}?x-oss-process=image/resize,w_300,h_300`"
              v-if="item.content.image"
            />
            <img
              :src="`${item.content.bannerImg}?x-oss-process=image/resize,w_300,h_300`"
              v-else-if="item.content.bannerImg"
            />
            <img
              :src="`${item.content.avatar}?x-oss-process=image/resize,w_300,h_300`"
              v-if="item.content.avatar"
            />
            <img
              :src="`${item.content.courseImg}?x-oss-process=image/resize,w_300,h_300`"
              v-if="item.content.courseImg"
            />
            <p style="font-weight: bolder;padding: 5px 0;font-size: 16px;">
              {{ item.content.title }}
            </p>
            <p style="color: #999">{{ item.content.subTitle }}</p>
            <p>{{ item.content.courseTitle }}</p>

            <!-- 创作者 -->
            <div class="content-list" v-if="Array.isArray(item.content.creators)">
              <h4>创作者:</h4>
              <div
                class="content-item"
                v-for="(creators, index) in item.content.creators.filter(
                  (creator) => creator.nickname,
                )"
                :key="index"
                style="width: 100%"
              >
                {{ creators.nickname }}
                <img style="max-width: 200px" :src="creators.avatar" alt="" />
              </div>
            </div>

            <!-- 两小横图的展示 -->
            <div class="content-list" v-if="Array.isArray(item.content.courses)">
              <div
                class="content-item"
                v-for="(courses, index) in item.content.courses.filter(
                  (courses) => courses.title,
                )"
                :key="index"
                style="width: 100%"
              >
                {{ courses.title }}
                <img style="max-width: 200px" :src="courses.cover" alt="" />
              </div>
            </div>

            <div class="content-list" v-if="Array.isArray(item.content.works)">
              <h4>作品:</h4>
              <div
                class="content-item"
                v-for="(work, index) in item.content.works.filter((work) => work.title)"
                :key="index"
                style="width: 100%"
              >
                {{ work.title }}
                <img :src="work.cover" alt="" />
                <div class="content-list" v-if="work.images">
                  <img
                    style="width: 20%"
                    :src="image"
                    v-for="image in work.images.slice(0, 5)"
                    :key="image"
                  />
                </div>
              </div>
            </div>

            <div class="content-list line" v-if="Array.isArray(item.content.categories)">
              <h4>积幕分类:</h4>
              <div
                class="content-item"
                v-for="(category, index) in item.content.categories.filter(
                  (category) => category.title,
                )"
                :key="index"
                style="width: 20%"
              >
                <h3>{{ category.title }}</h3>
                <p>{{ category.subTitle }}</p>
                <img
                  :src="`${category.bgImage}?x-oss-process=image/resize,w_300,h_300`"
                  v-if="category.bgImage"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item, index) in module.data" :key="index">
              {{ item.content }}
            </div>
          </div>
        </div> -->
      </div>
    </draggable>

    <edit-bar>
      <template slot="right">
        <el-button type="warning" icon="el-icon-plus" @click="moduleDialog = true">
          添加模块
        </el-button>
        <el-button type="primary" icon="el-icon-check" @click="saveModules">
          保存频道配置
        </el-button>
        <el-button type="success" icon="el-icon-upload" @click="pubModules">发布频道配置</el-button>
      </template>
    </edit-bar>

    <el-dialog width="90%" :visible.sync="moduleDialog" v-if="moduleDialog">
      <module selectedMode @select="moduleSelected"></module>
    </el-dialog>
  </div>
</template>

<script>
  import Module from 'views/Module/List';
  import EditBar from 'comp/EditBar';

  export default {
    props: {
      channel: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        moduleList: [],
        moduleDialog: false,
        moduleSaving: false,
      };
    },
    components: {
      Module,
      EditBar,
    },
    watch: {
      channel() {
        this.getChannesModule();
      },
    },
    mounted() {
      this.getChannesModule();
      setTimeout(() => {
        new this.$swiper('.swiper-container', this.$swiperOption);
      }, 1000);
    },
    methods: {
      /**
       * 获取频道下的模块数据
       */
      getChannesModule() {
        this.$service.CmsChannelPreview({ channelId: this.channel.id }).then((res) => {
          this.moduleList = [...res];
        });
      },
      /**
       * 新选择了模块
       */
      moduleSelected(selecetedData) {
        this.moduleList = this.moduleList.concat(selecetedData);
        this.moduleDialog = false;
      },
      /**
       * 保存频道模块
       */
      saveModules() {
        if (this.moduleSaving) return Promise.reject();

        this.moduleSaving = true;
        return this.$service
          .CmsChannelSaveModules(
            {
              channelId: this.channel.id,
              modules: this.moduleList.map((module, index) => {
                return {
                  channelId: this.channel.id,
                  moduleId: module.id,
                  online: 1,
                  showSize: module.showSize,
                  exchangeTime: module.exchangeTime ? module.exchangeTime : 0,
                  sortnum: index,
                  direct: module.direct,
                };
              }),
            },
            JSON_HEADER,
          )
          .then((res) => {
            this.$message.success('频道下模块配置保存成功!');
            this.getChannesModule();
          })
          .finally(() => {
            this.moduleSaving = false;
          });
      },
      /**
       * 移除选择的模块
       */
      removeModule(index) {
        this.$confirm('确认从当前频道配置中移除此模块吗?').then(() => {
          this.moduleList.splice(index, 1);
        });
      },
      /**
       *
       */
      pubModules() {
        this.$confirm('确认要发布到线上去吗?发布了就真的上线了!!!!').then(() => {
          this.saveModules().then(() => {
            this.$service
              .CmsChannelPublish({
                channelId: this.channel.id,
              })
              .then((res) => {
                this.$message.success('发布完成');
              });
          });
        });
      },
    },
  };
</script>

<style lang="less" scoped>
  .channel-edit {
    .order-container;
    .channel-module-online {
      .order-increment;
      padding: 10px;
      background-color: #eee;
      border-radius: 5px;
      margin-bottom: 5px;
      position: relative;
      min-height: 50px;

      .online-top {
        display: flex;
        padding: 5px;
        background-color: #eeee;
        font-size: 14px;

        .op-box {
          margin-left: auto;
          display: flex;
          align-items: center;
          /deep/ .el-radio {
            margin-right: 3px;
          }
          /deep/ .el-switch,
          .el-input {
            margin: 0 5px;
            width: 60px;
          }
        }
      }
    }
  }

  .swiper-slide {
    min-height: 50px;
  }

  .content-list {
    display: flex;
    min-height: 100px;
    overflow: scroll-x;
    flex-wrap: wrap;

    .content-item {
      width: 20%;
      // margin-right: 10px;
      // padding: 10px;
      border: 1px solid #eee;

      &.line {
        width: 100%;
        flex-wrap: nowrap;
      }
    }
  }
</style>
